<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于同创</title>

    <link rel="stylesheet" th:href="@{/swiper/swiper-min.css}">
    <script th:src="@{/swiper/swiper-min.js}"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        :root {
            --fontColor: #d82019;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        .wfull {
            width: 100%;

        }

        .obc {
            object-fit: cover;
        }

        .hfull {
            height: 100%;
        }
    </style>
</head>
<body>



<div th:replace="index_header.html :: index_header"  ></div>



<div th:replace="product/product_header.html :: product_header"  ></div>






<style>
    .root .change-btn button.active {
        border-bottom: 3px solid var(--fontColor);
    }

    .root .change-btn button:hover {
        background: rgba(0, 0, 0, 0.2);
    }

    .root .change-btn {
        text-align: center;
    }

    .root .change-btn button {
        background: white;
        border: none;
        cursor: pointer;
        margin: auto;
        line-height: 66px;
        height: 66px;
        padding: 0 33px;
    }

    .root {
        width: 80%;
        margin: auto;
    }



    @media screen and (min-width:901px) {

        /* 电脑  */
        .left {
            width: 45%;
            float: left;
        }

        .right {
            width: 55%;
            float: left;
            padding: 56px;
            line-height: 60px;
        }
    }

    @media screen and (max-width:900px) {
        /* 手机 */
    }


    .part-111 {
        width: 100%;
        /* height: 500px; */
        position: relative;
    }

    .part-111 .swiper .swiper-wrapper {
        height: auto;
        /*   随着内容自动撑开    */
        /* display: flex; */
        /* align-items: flex-end; */
    }

    .part-111 .swiper {
        width: 100%;
        /* height: 100%; */
    }

    .part-111 .swiper-slide {
        background: #fff;
        height: 100%;
    }

    .part-111 .swiper-slide img {
        display: block;
        width: 100%;
        /* height: 100%; */
        object-fit: cover;
    }

    .part-111 .swiper-button-prev {
        background: rgba(0, 0, 0, 0.5);
        padding: 30px;
        color: white;
        border-radius: 99px;
        /* left: -10%; */
    }

    .part-111 .swiper-button-next {
        background: rgba(0, 0, 0, 0.5);
        padding: 30px;
        color: white;
        border-radius: 99px;
        /* right: -10%; */
    }

    .part-111 .swiper-button-next:after,
    .part-111 .swiper-button-prev:after {
        font-size: 12px;
    }
</style>
<div class="root  clearfix">
    <br><br>


    <h1 style="font-weight: normal;">产品详情</h1>
    <h2 style="font-weight: normal; text-transform:uppercase;  color: var(--fontColor);">product details</h2>

    <br><br>




    <div class="left">
        <div class="part-111">
            <div class="swiper mySwiper222">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img th:src="${pageinfo.img_url}" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <script>
        function part_n() {
            let device_width = document.body.clientWidth;
            let per_num;
            if (device_width < 800) {
                per_num = 1;
            } else {
                per_num = 1;
            }
            let asdasd = new Swiper(".mySwiper222", {
                slidesPerView: per_num,
                cssMode: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                pagination: {
                    el: ".swiper-pagination",
                },
                mousewheel: true,
                keyboard: true,
            });
        }
        part_n()
    </script>




    <div class="right">
        <h1 style="font-weight: normal;" th:text="${pageinfo.title}"></h1>
        <p>机头立柱弧面设计，外形独特</p>
    </div>


    <p class="clearfix"></p>
    <br><br>

    <style>
        .hidden {
            display: none;
        }

        .change-btn-btn.active {}
    </style>

    <div class="change-btn">
        <button onclick="show_left(this)" class="  change-btn-btn  active  ">产品描述</button>
        <button onclick="show_right(this)" class=" change-btn-btn  ">产品特点</button>
    </div>
    <br>
    <h3 class="product-content   left-content     "   style="font-weight: normal;"   th:utext="${pageinfo.description}"  ></h3>
    <h3 class="product-content   right-content  hidden "  style="font-weight: normal">  时尚, 实用, 稳固, 大气, 性价比高 </h3>


    <script th:inline="javascript">
        function hidden_all() {
            let product_content_list = document.getElementsByClassName("product-content");
            for (let i = 0; i < product_content_list.length; i++) {
                product_content_list[i].classList.add("hidden");
            }
            let btn_list = document.getElementsByClassName("change-btn-btn");
            for (let i = 0; i < btn_list.length; i++) {
                btn_list[i].classList.remove("active");
            }
        }
        function show_left(eee) {
            hidden_all()
            document.getElementsByClassName("left-content")[0].classList.remove('hidden')
            eee.classList.add("active")
        }
        function show_right(eee) {
            hidden_all();
            document.getElementsByClassName("right-content")[0].classList.remove('hidden')
            eee.classList.add("active")
        }
    </script>








</div>









<div th:replace="footer.html :: tongchuang-footer"  ></div>








</body>
</html>